<!doctype html>
<html ng-app='app'>
<head>
    <meta charset='utf-8'>
    <title>欣乐土-登录系统</title>
    <script src='../plugin/AngularJs/angular.min.js'></script>
    <script src='../plugin/AngularJs/angular-route.js'></script>
    <script src='../plugin/AngularJs/angular-sanitize.min.js'></script>
    <script src="../plugin/Jquery/jquery-2.0.min.js"></script>
    <script src="../plugin/Bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugin/Uploadify/jquery.uploadify.min.js"></script>


    <link rel='icon' type='image/png' href='../image/logo-icon.png'>
    <link rel="stylesheet" type="text/css" href="../plugin/FontAwesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../plugin/Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../plugin/Uploadify/uploadify.css">
    <link rel='stylesheet' type='text/css' href='../css/bootstrap.dev.css'>
    <!--<link rel="stylesheet" type="text/css" href="../css/common.css">-->
    <style type="text/css">

        body {
            font-family:  "sans-serif", "微软雅黑";
            font-weight: normal;
            font-size: 13px;
        }
        .container {
            width: 1000px;
        }
        .header {
            background-color: #04c5b0;
            height: 60px;
            color: #838c8b;
        }
        .header > .container > div {
            display: inline-block;
        }
        .header .logo {
            width: 200px;
            height: 60px;
            line-height: 60px;
            float: left;
        }
        .header .title {
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            float: left;
            letter-spacing: 1px;
        }
        .header .user {
            width: 80px;
            height: 60px;
            line-height: 60px;
            float: right;
        }
        .header .user .si-xs {
            float: left;
            margin-top: 22px;
            margin-right: 5px;
        }
        .header .user .fa {
            margin-top: 22px;
            cursor: pointer;
            font-size: 14px;
        }

        .content {
            background-color: #fff;
            border: #CCC 1px solid;
        }
        .content > .row {
            padding: 40px 0px;
        }

        .footer {
            text-align: center;
            color: #999;
            padding: 30px 0px;
        }

        .si-xs {
            display: inline-block;
            width: 16px;
            height: 16px;
        }
        .si-user {
            background: url(../image/user-logo-default.png) no-repeat;
            background-size: 100% 100%;
        }
        .si-pwd {
            background: url(../image/pwd.png) no-repeat;
            background-size: 100% 100%;
        }

        .carousel {
            padding-left: 0px;
        }
        .carousel > .carousel-indicators {
            bottom: -30px;
        }
        .carousel > .carousel-indicators > li {
            background-color: #CCC;
            border-color: #CCC;
        }
        .carousel > .carousel-indicators > li.active {
            background-color: #F33;
            border-color: #F33;
        }

        .box-form {
            padding-left: 80px;
        }
        .box-form > .title {
            font-size: 18px;
            color: #04c5b0;
            margin: 15px 0px;
        }
        .box-form > .table {
            width: 280px;
        }
        .box-form > .table .td-label {
            padding-left: 0px;
            color: #333;
            width: 60px;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div class='header'>
    <div class='container'>
        <div class='logo'>
            <img src='../image/logo-b.png'>
        </div><!--
            <div class='title'>
                睿游科技管理系统
            </div>-->
        <div class='user'>
            <i class='si-xs si-user'></i>
            登录
        </div>
    </div>
</div>

<div class='container content'>
    <div class='row'>
        <div class='col-md-6' style='border-right: #EEE 1px solid;'>
            <div class='carousel slide' id='loop'>
                <ol class='carousel-indicators'>
                    <li data-target='#loop' data-slide-to='0' class='active'></li>
                    <li data-target='#loop' data-slide-to='1'></li>
                    <li data-target='#loop' data-slide-to='2'></li>
                </ol>

                <div class='carousel-inner'>
                    <div class='item active'>
                        <img src='../image/loop-1.png'>
                    </div>
                    <div class='item'>
                        <img src='../image/loop-2.png'>
                    </div>
                    <div class='item'>
                        <img src='../image/loop-3.png'>
                    </div>
                </div>

            </div>
        </div>
        <div class='col-md-6 box-form' ng-controller='Login'>
            <div class='title'>用户登录</div>
            <table class='table table-va-middle table-no-border'>
                <tr>
                    <td class='td-label text-right'> <i class='si-xs si-user'></i></td>
                    <td>
                        <input type='text' class='form-control input-sm input-w-md'
                               placeholder='用户名、手机号或邮箱' style="width: 250px" ng-model='username'>
                    </td>
                </tr>
                <tr>

                    <td class='td-label text-right'> <i class='si-xs si-pwd'></i></td>
                    <td>
                        <input type='password' class='form-control input-sm input-w-md'
                               placeholder='登录密码' style="width: 250px;line-height: 20px" ng-model='password' ng-keyup="enterEvent($event)">
                    </td>
                </tr>
                <tr>
                    <td class='td-label' colspan='2'>
                            <span class='box-checkbox' style='width:100%'>
                                <input type='checkbox' ng-model='remeberMe'>
                                <span class='text-info'>记住我的登录信息</span>
                            </span>
                    </td>
                </tr>
                <tr>
                    <td class='td-label' colspan='2'>
                        <button class='btn btn-md btn-success btn-block' ng-click='login()'>立即登录</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class='container footer'>
    Copyright@ 1999-2016 中国睿游 版权所有
</div>
</body>

<script type="text/javascript">
    var domBg;
    $(document).ready(function(){
        //body背景设置
        domBg   = $('<div></div>');
        domBg.css('width', '100%')
                .css('height', $(window).height() * 0.5)
                .css('background-color', '#04c5b0')
                .css('position', 'absolute')
                .css('left', '0px')
                .css('top', '0px')
                .css('z-index', '-1');
        $('body').append(domBg);

//        $('.content').css('margin-top', ($(window).height() - $('.content').height() - 60) * 0.5);
        $('.header').css('margin-top',($(window).height() - $('.content').height() - 60) * 0.5-40);
    });

    window.onresize     = function(){
        domBg.css('height', $(window).height() * 0.5);
//        $('.content').css('margin-top', ($(window).height() - $('.content').height() - 60) * 0.5);
        $('.header').css('margin-top',($(window).height() - $('.content').height() - 60) * 0.5-40);
    }
</script>
<script type="text/javascript" src='./common/function.js'></script>
<script type="text/javascript" src='./common/config.js'></script>
<script type="text/javascript" src='./common/route.js'></script>
<script type="text/javascript" src='./common/service.js'></script>
<script type="text/javascript">
app.controller('Login', function($scope, $rootScope, $http, common){
    $scope.username     = '';
    $scope.password     = '';
    $scope.remeberMe = false;

    $scope.login    = function(){
        var url     = config.prefix_url+'/Public/login';
        var param   = {
            'username'  : $scope.username,
            'password'  : $scope.password,
            'remeber_me': $scope.remeberMe ? 1: 0
        }

        $http.post(url, param).success(function(info){
            if(info.code != 1){
                common.dealError(info);
                return false;
            }
            S('user_info', info.data.info);
            window.open('./index.html', '_self');
        });
    }

    $scope.enterEvent = function(e) {
        var keycode = window.event?e.keyCode:e.which;
        if(keycode==13){
            $scope.login();
        }
    }
});
</script>
</html>
